<!DOCTYPE html><html lang="ar"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title> Contact Us - Laura Fashion</title><style>
:root{
--brand:#0c1a33; /* أزرق داكن */
--brand-hover:#152850; /* أزرق أفتح للتفاعل */
--accent:#b58b2a; /* ذهبي */
--bg:#f8fafc; --text:#1e293b; --muted:#64748b;
--white:#fff; --border:#e2e8f0;
--wh:#22c55e; --wh-hover:#16a34a; /* واتساب */
--radius:14px; --shadow:0 6px 18px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Tahoma,Arial,sans-serif;background:var(--bg);color:var(--text)}
.container{max-width:760px;margin:28px auto;padding:0 14px}
.header{ text-align:center; margin-bottom:18px }
.header h1{ margin:0; font-size:26px; color:var(--brand); font-weight:900 }
.header p{ margin:6px 0 0; color:var(--muted); font-size:14px }
.card{
background:var(--white); border:1px solid var(--border);
border-radius:var(--radius); box-shadow:var(--shadow);
padding:18px;
}
form{ display:grid; gap:14px }
.grid{ display:grid; gap:14px; grid-template-columns:1fr 1fr }
@media (max-width:680px){ .grid{ grid-template-columns:1fr } }
label{ font-size:13px; font-weight:700; margin-bottom:6px; display:block }
.req{ color:var(--accent) }
input, textarea{
width:100%; border:1px solid var(--border); border-radius:12px;
padding:12px; font-size:14px; background:#fff; color:var(--text); outline:none;
transition:border-color .2s, box-shadow .2s, background .2s;
}
input:focus, textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(181,139,42,.3) }
textarea{ min-height:160px; resize:vertical; line-height:1.6 }
.actions{
display:flex; flex-wrap:wrap; gap:10px; margin-top:4px;
align-items:center; justify-content:center;
}
.btn, .btn-whatsapp{
flex:1 1 200px;
display:inline-flex; align-items:center; justify-content:center; gap:8px;
border:none; border-radius:12px;
min-height:38px;
padding:9px 12px;
font-size:13px; font-weight:800;
color:#fff; cursor:pointer; text-decoration:none;
transition:background .2s, transform .05s, box-shadow .2s;
}
.btn{ background:var(--brand); box-shadow:0 4px 10px rgba(12,26,51,.25) }
.btn:hover{ background:var(--brand-hover) }
.btn:active{ transform:scale(.98) }
.btn-whatsapp{ background:var(--wh); box-shadow:0 4px 10px rgba(34,197,94,.22) }
.btn-whatsapp:hover{ background:var(--wh-hover) }
.btn-whatsapp:active{ transform:scale(.98) }
.wh-ico{ inline-size:16px; block-size:16px; }
.hint{ font-size:12px; color:var(--muted) }
#formStatus{ display:none; font-size:13px; margin-top:8px }
#formStatus.ok{ color:#16a34a } #formStatus.err{ color:var(--accent) }
@media (max-width:420px){
.container{padding:0 10px}
.card{padding:14px}
.btn, .btn-whatsapp{ min-height:36px; padding:8px 10px; font-size:12.5px }
input, textarea{ padding:11px; font-size:13.5px }
}
</style></head><body style=";text-align:left;direction:ltr">
<form id="contactForm" action="https://formsubmit.co/[email protected]" method="POST" style=";text-align:left;direction:ltr"><!-- إعدادات FormSubmit --><input type="hidden" name="_captcha" value="false"><input type="hidden" name="_template" value="table"><input type="hidden" name="_subject" value="رسالة جديدة - موقع لورا فاشن"><input type="hidden" name="_next" value="#"><input type="text" name="_honey" style="display:none"> <input id="name" name="name" required placeholder="مثال: رهف الزهراني" autocomplete="name">
<input id="email" type="email" name="email" required placeholder="
[email protected]" autocomplete="email">
<input id="subject" name="subject" required placeholder="موضوع الرسالة">
<input id="phone" name="phone" placeholder="05xxxxxxxx" inputmode="tel">
<textarea id="message" name="message" required placeholder="اكتب رسالتك هنا..."></textarea>
* All required fields must be completed before submission.
</form> </body></html>
